<template>
  <div class="themeWrapper">
    <div>
      <div class="animate__animated animate__fadeInRightBig">
        哈哈哈 {{ $store.getters.theme }}
      </div>
      <transition
        mode="out-in"
        enter-active-class="animate__animated animate__fadeIn animate__faster"
        leave-active-class="animate__animated animate__fadeOut animate__faster"
      >
        <!-- transition只针对一个DOM元素 ，而transition-group可以针对多个但是要设置key -->
        <!--
        <div v-if="checked" class="img imgLight"></div>
        <div v-else class="img imgDark"></div> -->
        <img
          class="img"
          v-if="checked"
          :src="require('../../assets/imgs/light.png')"
          alt="图片"
          key="light"
        />
        <img
          class="img"
          v-if="!checked"
          :src="require('../../assets/imgs/dark.png')"
          alt="图片"
          key="dark"
        />
      </transition>
    </div>

    <my-switch-btn
      v-model="checked"
      active-color="#13b5b1"
      inactive-color="#f6d5e5"
      @BtnClickafter="changeCallback"
    ></my-switch-btn>
  </div>
</template>
<script>
import mySwitchBtn from './mySwitchButton.vue'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'themeSelect',
  components: { mySwitchBtn },
  data() {
    return {
      checked: this.$store.getters.theme !== 'light',
      imgUrl: '',
      // 如果是多个图片切换
      imglist: [
        {
          imgUrl: 'light'
        },
        { imgUrl: 'dark' }
      ]
    }
  },
  created() {
    // console.log(this.$store.getters.theme)
    // const initCheckedVal = this.$store.getters.Theme !== 'light'
    // this.checked = initCheckedVal
  },
  mounted() {
    console.log(this.$store.getters.theme)
  },
  methods: {
    // 监听每次改变按钮触发的函数
    changeCallback(e) {
      const nowTheme = this.checked ? 'dark' : 'light'
      this.setTheme(nowTheme)
    },
    // 提交设置主题色
    ...mapMutations({ setTheme: 'app/setTheme' })
  },
  computed: {
    // imgUrl() {
    //   const name = !this.checked ? 'light' : 'dark'
    //   return `/imgs/${name}.png`
    // }
    ...mapGetters({
      Theme: 'theme'
    })
  },
  watch: {
    // checked: {
    //   handler: function (oldVal, newVal) {
    //     console.log(oldVal, newVal)
    //     const nowTheme = oldVal ? 'dark' : 'light'
    //     this.setTheme(nowTheme)
    //     // this.$store.commit('app/setTheme', nowTheme)
    //   }
    // }
  },
  activated: {},
  deactivated: {}
}
</script>
<style lang="less" scoped>
.themeWrapper {
  display: flex;
  justify-content: space-between;
  padding: 5px 0px;
  align-items: center;
  background: #ccc;
  border-radius: 5px;
  width: 40%;
  overflow: hidden;
  /*  transition: background 0.2s ease, opacity 0.5s ease;*/
  .img {
    max-height: 40px;
    display: inline-block;
  }
  .imgLight {
    background: url('../../assets/imgs/light.png') center/contain no-repeat;
    width: 100px;
    padding-bottom: 50px;
  }
  .imgDark {
    background: url('../../assets/imgs/dark.png') center/contain no-repeat;
    width: 100px;
    padding-bottom: 50px;
  }
}
</style>
